/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../../assets/styles/base/_colors.scss';
@import '../../assets/styles/base/_variables.scss';

connection-profile {

    $highlighted: #e4e4e4;

    table.profile-info {

        &.extra-space-right {
            td {
                padding-right: 34%;
            }
        }

        &.extra-space-left {
            th {
                padding-left: 1.5%;
            }
        }

        tbody {
            tr {
                box-shadow: none;

                th {
                    text-align: start;
                    padding-right: $space-medium;
                }

                td {
                    vertical-align: text-top;
                    padding: $space-smedium 0;

                    input[type=checkbox] {
                      top: 0;
                      left: 0;
                    }
                }

                .text-below {
                  padding: 0;
                }
            }
        }
    }

    button.certificate-button {
        padding: 0 $space-medium;
        margin-left: $space-medium;
        min-width: 0;
        border: 1px solid $second-highlight;

        svg.standard-icon {
            margin-right: 0;
        }

        &.no-cert {
            border: 1px dashed $fifth-highlight;
        }

        &:not(.no-cert) {
          svg {
              fill: #3F55AF
          }
        }

        &:hover {
            background-color: $second-highlight;
            border-color: $second-highlight;
            svg {
                fill: #FFF
            }
        }

        &:focus {
            background-color: $second-highlight;
            border-color: $second-highlight;
            svg {
                fill: #FFF
            }
        }

        &.ca {
          margin-left: 50px;
        }
    }

    .profile-buttons {
        margin-left: $space-medium;
    }

    footer {
        display: flex;

        .info {
            color: $secondary-text;
            font-style: italic;
        }

        &.with-info {
            justify-content: space-between !important;
        }
    }

    .profile-section {
        display: flex;

        .description {
            flex-basis: 15%;
            color: $tertiary-text;
            padding-left: $space-medium;

            &.upper {
                text-transform: uppercase;
            }
        }

        .data {
            flex-basis: 85%;

            .property-set {
                border-left: 2px solid $first-highlight;
                padding-left: $space-medium;
                margin-bottom: $space-large;
            }

            .profile-buttons {
                align-self: flex-end;
                padding-bottom: $space-medium;
            }
        }

        &.delimited {
            margin-bottom: $space-large;
            padding-bottom: $space-large;
            border-bottom: 1px solid $fourth-highlight;
        }
    }

    .checkbox-label {
      &.ca {
        top: 15px;
      }
    }

    .help {
      color: #19273C;
      font-weight: 300;
    }
}
